<template>
  <div>
    <a-menu
      style="width: 400px"
      :open-keys.sync="openKeys"
      mode="inline"
      @click="handleClick"
    >
      <a-sub-menu key="sub1" @titleClick="titleClick">
				 <span slot="title">案例</span>
        <a-menu-item-group key="g1">
          <a-menu-item key="1">
           项目管理
          </a-menu-item>
          <a-menu-item key="2">
              首页
          </a-menu-item>
         <a-menu-item key="3">
           咨询服务创建及查看页面
          </a-menu-item>
          <a-menu-item key="4">
            登录页面
          </a-menu-item>
          <a-menu-item key="5">
            服务对象个人档案创建及查看页面
          </a-menu-item>
          <a-menu-item key="6">
            个案服务档案创建及查看页面
          </a-menu-item>
        </a-menu-item-group>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      openKeys: ['sub1'],
    };
  },
  watch: {
    openKeys(val) {
      console.log('openKeys', val);
    },
  },
  methods: {
    handleClick(e) {
      console.log(e.key);
			switch (e.key){
				case '1':
					this.$router.push({ path: '/ingi-project' })
					break;
				case '2':
					this.$router.push({ path: '/index' })
					break;
				case '3':
					this.$router.push({ path: '/serves' })
					break;
				case '4':
					console.log(true);
					this.$router.push({ path: '/login' })
					break;
				case '5':
					this.$router.push({ path: '/userServes' })
					break;
				case '6':
					this.$router.push({ path: '/userView' })
					break;
				default:
					break;
			}
    },
    titleClick(e) {
      console.log('titleClick', e);
    },
  },
};
</script>
